<script setup lang="ts">
  import axios from "axios";
  import macros from "../macros.ts";
  import {ref} from "vue";
  var videolist=ref([]);
  var excep;
  axios.get(macros.server+"/api/videolist")
      .then(function (response){
          videolist.value=response.data.data;
      }).catch(function (error){
        excep=error;
        console.log(error);
  });
</script>

<template>
  <h2>我们的作品</h2>
  <p>单击封面图播放</p>
  <div v-for="video in videolist" style="display: inline-block">
    <router-link :to="{name:'VideoPlayer', params:{id:video.id}}"><img :src="video.image" class="photo mx-auto d-block img-fluid"></router-link>
  </div>
</template>

<style scoped>
@media only screen and (max-width: 600px) {
  .photo{
    width: 80vw;
  }
}
@media only screen and (min-width: 600px) {
  .photo {
    width: 20vw;
  }
}
</style>